﻿<%@ Page Title="" Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="CustomTooltip.aspx.cs" Inherits="YUIAspNetDemo.Charts.CustomTooltip" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUI Asp.Net Controls : LiveDemo : Charts : Custom Tooltip</title>
    <script type="text/javascript">
        function ShowTooltip(sender, args) {
            args.TooltipText = "this is the tooltip\n";
            args.TooltipText += args.series.displayName + " for " + args.item.year + "( $" + args.item[args.series.xField] + " )";
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Custom tooltip</h1>

    <p>YUIAsp.Net Charts components allow you to apply styles to the tooltip, to make it more appealing.</p>
    <p>You also have full control over the tooltip's content, which you can customize using a simple javascript function.</p>
    
    <p>Below is an example of how to accomplish that.</p>

    <yui:BarChart ID="chart" runat="server" OnClientShowTooltip="ShowTooltip" YField="year" Width="660px" Height="300px">
        <Series>
            <yui:BarSeries XField="revenue" DisplayName="revenue" />
            <yui:BarSeries XField="expense" DisplayName="expense" />
            <yui:LineSeries XField="income" DisplayName="income" />
        </Series>
        <ChartStyle>
            <TooltipStyle>
                <Border Color="Red" Size="10" />
            </TooltipStyle>
        </ChartStyle>
    </yui:BarChart>
</asp:Content>
